
<template>
  <div>
    <table class="gridtable" border="1" cellSpacing="0" cellPadding="0">
      <thead>
        <tr>
          <th :style="`width:40px`"><b>序号</b></th>
          <th v-for="(col, index) in columnsData" :key="index" :style="`width:${col.width}px`"><b>{{ col.title }}</b></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row ,rIndex) in insideTableData" :key="rIndex">
          <td style="width:40px !important;">{{ rIndex + 1 }}</td>
          <td v-for="(item, cIndex) in row" :key="cIndex">{{ item }}</td>
        </tr>
      </tbody>
    </table>

  </div>
</template>
<script>
export default {
  name: 'ShowGoodsList',
  props: {
    tableData: {
      type: Array,
      default: () => { return [] }
    },
    columnsData: {
      type: Array,
      default: () => { return [] }
    }
  },
  data() {
    return {
    }
  },
  computed: {
    'insideTableData': function(params) {
      const columnsData = this.columnsData
      const colkeys = columnsData.map(item => { return item.field })
      const tableData = this.tableData
      const result = []
      tableData.forEach(item => {
        // 一行
        const row = []
        colkeys.forEach(key => {
          const value = item[key]
          row.push(value)
        })
        result.push(row)
      })
      return result
    }
  },
  mounted() {
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
//表格样式
table.gridtable {
  width: 100%;
  font-family: verdana, arial, sans-serif;
  font-size: 10px !important;
  table-layout:fixed;/*列宽由表格宽度和列宽度设定。*/
  color: #000000;
  border-width: 1px;
  border-color: #000000;
  text-align: left;
  border-collapse: collapse;
  border-bottom: none;
}

table.gridtable th {
  padding: 2px;
  border: #000000 1px solid;
  font-weight: bold;
  background-color: #f4f4f4;
}

table.gridtable td {
  border-width: 1px;
  padding: 1px;
  border-style: solid;
  border-color: #000000;
  background-color: #ffffff;
}

table.gridtable tr {
  page-break-inside: avoid;
}

table.gridtable tr th {
  font-weight: 400 !important;
}
</style>
